<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;">详情</span>
      </div>

      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="推荐基金" prop="fundCode_s">
              <el-select v-model="fundCode_s" placeholder="请选择">
                <el-option
                  v-for="item in getOnlineOrganBao"
                  :label="item.fundName"
                  :value="item.fundCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fundRecommend">设为推荐</el-button>
              <el-button type="primary" @click="fundRecommend_del">清空推荐</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="基金代码" prop="fundCode">
              <el-input v-model="form.fundCode" placeholder="输入基金代码" :disabled="disableFundCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="最低起购点" prop="minValue">
              <el-input v-model="form.minValue" placeholder="输入最低起购点" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="20">
            <el-form-item label="提示语" prop="reminder">
              <el-input v-model="form.reminder"  placeholder="输入提示语" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">确定</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>


<script type="text/babel">
  import assignDeep from 'assign-deep'
  import {mapActions} from 'vuex'

  import organBaoStore from './bll/organBaoStore'
  import store from '../../store'

  (!store.state.organBaoStore) && store.registerModule('organBaoStore', organBaoStore)

  export default {
    data() {
      return {
        disableForm: true,
        disableFundCode: true,
        pageModel: 'EDIT',
        fundCode_s: '',
        form: {
          fundCode: '',
          minValue: '',
          reminder: ''
        },
        options: [{
          value: '个人',
          label: '个人'
        }, {
          value: '机构',
          label: '机构'
        }]
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      }
    },

    computed: {
      getOrganBao() {
        return this.$store.state.organBaoStore.organBao;
      },
      getOnlineOrganBao() {
        return this.$store.state.organBaoStore.onlineOrganBao;
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.fundCode = record.fundCode;
          this.form.minValue = record.minValue;
          this.form.reminder = record.reminder;
        } else {
          assignDeep(this.form, {
            fundCode: '',
            minValue: '',
            reminder: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['editRecommend', 'editOrganBao', 'addOrganBao', 'queryOrganBao', 'queryOnlineOrganBao']),
      saveHandler() {
        let self = this;
        console.log(this.form)
        if (this.pageModel === 'ADD') {
          this.form.isEdit = 0
        } else {
          this.form.isEdit = 1
        }
        let newform = assignDeep({}, self.form);
        self[self.pageModel === 'ADD' ? 'addOrganBao' : 'editOrganBao'](newform).then(() => {
          this.queryOrganBao();
          self.disable();
          self.disableCode();
          if (self.pageModel === 'ADD') {
            self.resetHandler();
            self.$message.success('添加成功');
          } else {
            self.resetHandler();
            self.$alert('更新成功', '消息', {
              confirmButtonText: 'OK'
            });
          }
        })
        //if (this.pageModel === 'ADD') {
        //  this.form.isEdit = 0
        //  let newform = assignDeep({}, this.form)
        //  this.addOrganBao(newform).then(() => {
        //    self.$alert('添加成功', '消息', {
        //      confirmButtonText: '确认'
        //    }).then(() => {
        //      this.initPage()
        //    });
        //  })
        //  //if (data) {
        //  //  this.$message({
        //  //    message: '操作成功',
        //  //    type: 'success'
        //  //  });
        //  //  //this.$parent.querySuggestions({pageIndex: this.$parent.pageIndex, pageSize: this.$parent.pageSize});
        //  //}
        //} else {
        //  this.form.isEdit = 1
        //  let newformEdit = assignDeep({}, this.form)
        //  this.editOrganBao(newformEdit).then(() => {
        //    self.$alert('更新成功', '消息', {
        //      confirmButtonText: '确认'
        //    }).then(() => {
        //      this.initPage()
        //    });
        //  })
        //
        //}

      },
      fundRecommend () {
        console.log(this.fundCode_s)
        this.$confirm('确定推荐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var fundCode = this.fundCode_s
          this.editRecommend({fundCode}).then(() => {
            console.log('wancheng')
            this.$message({
              type: 'success',
              message: '推荐成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          })
        })
      },
      fundRecommend_del () {
        this.$confirm('确定清空推荐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var fundCode = '-1'
          this.editRecommend({fundCode}).then(() => {
            console.log('wancheng')
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      resetHandler() {
        console.log(this.$refs.form)
        this.$refs.form.resetFields();
        this.disableForm = true;
        this.disableFundCode = true;
      },

      initPage() {
        this.queryOnlineOrganBao();
      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      disableCode() {
        this.disableFundCode = true;
      },
      enableCode() {
        this.disableFundCode = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>

